<template>
  <el-progress :percentage="percentage" />
</template>
<script>
export default {
  components: {},
  props: {
    min: {
      type: String,
      default: new Date().toLocaleDateString()// .format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data () {
    return {
      percentage: 0,
      cutOff: 0,
      timer: null
    };
  },
  // 监听属性 类似于data概念
  computed: {
    // percentage: function() {

    // }
  },
  // 监控data中的数据变化
  watch: {
    min: {
      immediate: true,
      handler(val) {
        // console.log(arguments);
        const n = this.moment().diff(this.moment(val), 'minutes');
        if (n > 9) {
          this.cutOff = 90;
          this.percentage = 90;
        } else {
          this.cutOff = 10 * n;
          this.percentage = 10 * n * 0.6;
        }
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.timer = setInterval(() => {
      this.getCut();
      if (this.percentage < this.cutOff) this.percentage++;
    }, 6 * 1000);
  },
  destroyed() {
    this.timer && clearInterval(this.timer);
  },
  // 方法集合
  methods: {
    getCut() {
      const n = this.moment().diff(this.moment(this.min), 'minutes');
      switch (n) {
        case 0:
        case 1:
          this.cutOff = 10;
          break;
        case 2:
          this.cutOff = 10 * n;
          break;
        case 3:
          this.cutOff = 10 * n;
          break;
        case 4:
          this.cutOff = 10 * n;
          break;
        case 5:
          this.cutOff = 10 * n;
          break;
        case 6:
          this.cutOff = 10 * n;
          break;
        case 7:
          this.cutOff = 10 * n;
          break;
        case 8:
          this.cutOff = 10 * n;
          break;
        case 9:
          this.cutOff = 10 * n;
          break;
      }
      // if (n > 9) {
      //   this.cutOff = 90;
      //   this.percentage = 90;
      // }
    }
  }
};
</script>
<style lang='scss' scoped>
</style>
